import router from '@/router'
import store from '@/store' // store===this.$store
// 它是任何路由跳转前都会触发它，它允许通过后才可进入相应路由
// next()正常通过   next(其它路由path)重新再走一次导航守卫
const whitePage = ['/login', '/404']
// 前置守卫
router.beforeEach(async(to, from, next) => {
  console.log('beforeEach')
  /*
    是否有token:(store.state.user.token)
        有
           判断是否要去登陆页
               是
                  跳转到首页
               不是
                   正常进入

        没有
            判断所去页面是否需要登陆:login 404
                需要
                    跳转到登陆页
                不需要
                    正常进入

*/
  // console.log('to', to)
  if (store.state.user.token) {
    // 将路由的大写统一转换成小写，因为浏览器地址上是不区分大小写的，但我们拿到的值是有大小写分别 的
    if (to.path.toLowerCase() === '/login') {
      next('/')
    } else {
      // 调用接口获取用户信息就可以了
      /*
      1：定义接口api
      2:定义vuex的state存储用户信息，定义mutations修改用户信息，定义actions调用接口获取用户信息
      3：在进入页面前触发actions
      4:判断：没有用户信息才调用actions
      */
      if (!store.state.user.userInfo.userId) {
        // console.log(1)
        await store.dispatch('user/getUserInfo')
        // {path,query....}
        // 再经过一次导航守卫
        // 判断要去的页面你有没有权限，有去相应页面，没有去首页，很麻烦，不建议在这里处理
        next(to)
        // next()
        // console.log(2)
      } else {
        next()
      }
    }
  } else {
    // to.path是否在白名单中存在，存在：放行，不存在：跳转到登陆页
    if (whitePage.includes(to.path.toLowerCase())) {
      next()
    } else {
      // fullPath:完整的path地址
      next('/login?redirect=' + to.fullPath)
    }
  }
})
// 后置守卫
router.afterEach((to, from) => {
  console.log('afterEach')
  // to:要去的页面的路由
  // from:从哪来的路由
  // 如果已存在，就不要再收集了，考虑去重处理
  const list = store.state.histroyList.list
  // to.path是否在list的每一项的path中存在
  const bol = list.some((item) => item.path === to.path)
  // bol:true有存在，false:不存在
  if (!bol) {
    store.commit('histroyList/setList', [...store.state.histroyList.list, to])
  }
})
// 解析勾子
router.beforeResolve((to, from, next) => {
  console.log('beforeResolve')
  next()
})
